<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>M&oacute;dulo Administrador</title>
        <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>js/bootstrap/css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/theme.css">
        <link rel="stylesheet" href="<?php echo base_url();?>js/font-awesome/css/font-awesome.css">

        <script src="<?php echo base_url();?>js/jquery-1.7.2.min.js" type="text/javascript"></script>
        <style type="text/css">
            #line-chart {
                height:300px;
                width:800px;
                margin: 0px auto;
                margin-top: 1em;
            }
            .brand { font-family: georgia, serif; }
            .brand .first {
                color: #ccc;
                font-style: italic;
            }
            .brand .second {
                color: #fff;
                font-weight: bold;
            }
        </style>
    </head>
    <body class=""> 
        <div class="navbar">
            <div class="navbar-inner">
                <a class="brand" href="index.html"><span class="first">M&oacute;dulo</span><span class="second">Administrador</span></a>
            </div>
        </div>
    
        <div class="">
            <div style="height: 35px; min-width: 350px" class="header">
                <h1 class="page-title" style="text-align: center; margin-top: 5px;">Iniciar Sesión </h1>
            </div>
            <div id="LoginFormDiv">
                <table border="1" style="margin-left: auto; margin-right: auto; width: 800px">
                    <tr>
                        <td>
                            <form method="post" action="<?php echo site_url('LoginController/validateLoginForm'); ?>">
                            <table border="1" style="margin-left: 250px">
                                <tr>
                                    <td style="text-align: right">DNI :</td>
                                    <td><input style="margin-bottom: auto; margin-top: auto" class="input-medium" id="dniTextField" name="dni" type="text"></td>
                                    <td><label id="dniMessage" ></label></td>
                                </tr>
                                <tr>
                                    <td style="text-align: right">Contraseña :</td>
                                    <td><input style="margin-bottom: auto; margin-top: auto" class="input-medium" id="passwordTextField" name="password" type="text"></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td style="text-align: right"><button disabled="true" style="margin-bottom: auto; margin-top: auto" id="loginButton" class="btn" type="submit">Acceder</button></td>
                                </tr>
                            </table>
                            </form>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: center">
                            <label style="color: red"><?php if(isset($loginMessage)){ echo $loginMessage;} ?></label>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: center">
                            ¿Olvidó su contraseña? <a href="www.google.com">Recuperar contraseña</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
    
    <script>
        $(document).ready(function() {
            $('#dniTextField').keyup(function () {
                var dniTF = $(this).val();
                
                
                if(dniTF.length === 8){
                    if(  $.isNumeric(dniTF)  ){
                        $('#loginButton').attr('disabled', false);
                        $('#dniMessage').text("");
                    }else{
                        $('#loginButton').attr('disabled', true);
                        $('#dniMessage').text("solo se admite valores numéricos");
                    }
                }else{
                    $('#loginButton').attr('disabled', true);
                    if(dniTF.length > 8){
                        $('#dniMessage').text("Solo se permiten 8 dígitos");
                    }else{
                        $('#dniMessage').text("");
                    }
                }
                
            });
        });
    </script>
    
</html>


